<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-autocomplete clearable v-model="queryForm.provinceName" class="filter-item" placeholder="省份" style="width: 125px;" :fetch-suggestions="querySearch" @select="handleSelectCity" @clear="clearProvince">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.cityName" class="filter-item" placeholder="城市" style="width: 125px;" :fetch-suggestions="querySearchCity" @select="handleSelectDistrict" @clear="clearCity">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.districtName" class="filter-item" placeholder="区" style="width: 125px;" :fetch-suggestions="querySearchDistrict" @select="handleSelectCommunity" @clear="clearCommunity">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.communityName" class="filter-item" placeholder="小区" style="width: 125px;" :fetch-suggestions="querySearchCommunity" @select="handleSelectBuildings" @clear="clearLast">
      </el-autocomplete> -->
      <el-select
        clearable
        v-model="queryForm.provinceId"
        class="filter-item"
        filterable
        placeholder="省份"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseProvince', 'query')"
      >
        <el-option
          v-for="(item, index) in provinces"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.cityId"
        class="filter-item"
        filterable
        placeholder="城市"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCity', 'query')"
      >
        <el-option
          v-for="(item, index) in citys"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.districtId"
        class="filter-item"
        filterable
        placeholder="区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseRegin', 'query')"
      >
        <el-option
          v-for="(item, index) in districts"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        v-model="queryForm.rowId"
        class="filter-item"
        filterable
        placeholder="小区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCommunity', 'query')"
      >
        <el-option
          v-for="(item, index) in communitys"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        clearable
        style="width: 150px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="请选择小区状态"
      >
        <el-option
          v-for="(val, key) in Dicts.CONSUMER_STATUS"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>

      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入小区名称"
        v-model.trim="queryForm.communityName"
        maxlength="20"
      >
      </el-input>
      <el-button
        class="filter-item"
        @click="doSearchQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        v-permission="'community:add'"
        class="filter-item"
        style="margin-left: 10px;"
        @click="openCreateDialog"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <el-table-column prop="rowId" label="小区ID" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="villageName"
        label="省/市/区"
        width="450"
        align="center"
      >
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName !== undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}/${scope.row.villageName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName === undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}`
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="小区名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="type" label="类型" width="150" align="center">
        <template slot-scope="scope">
          {{ Dicts.APP_TYPE[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="小区状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.CONSUMER_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column prop="photo" label="小区图片" width="150" align="center">
        <template slot-scope="scope" v-if="scope.row.photo != null">
          <div v-viewer>
            <img
              :src="$oss(scope.row.photo)"
              alt
              style="width:30px;height:30px;border-radius:5px;"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding "
        width="250"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- <el-button icon="el-icon-search"   size="mini" circle></el-button> -->
          <el-button
            v-permission="'community:detail'"
            type="default"
            icon="el-icon-search"
            size="mini"
            @click="queryMap(scope.row)"
            circle
            title="查看地图"
          ></el-button>
          <el-button
            size="mini"
            v-permission="'community:queryGeneralCard'"
            @click="queryDoorById(scope.row.rowId)"
            title="通卡列表"
            icon="el-icon-tickets"
            circle
          ></el-button>
          <!-- <el-button  type="success" size="mini" @click="bindGeneralCard(scope.row.rowId)" icon="el-icon-goods" circle title="绑定通卡"></el-button> -->
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            @click="openAddBuilding(scope.row)"
            circle
            title="增加楼栋"
            v-permission="'community:addBuilding'"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            @click="editExample(scope.row)"
            icon="el-icon-edit"
            circle
            title="编辑小区"
            v-permission="'community:update'"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            icon="el-icon-delete"
            circle
            title="删除小区"
            v-permission="'community:delete'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="`${'新增'}小区`"
      :visible.sync="dialogFormVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="exampleForm"
        label-width="110px"
        :rules="exampleFormRules"
        ref="exampleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="provinceId" v-show="showCommName">
              <!-- <el-autocomplete clearable v-model="exampleForm.provinceName" class="filter-item" placeholder="省份" style="width: 100%;" :fetch-suggestions="addQuerySearch" @select="addHandleSelectCity" @clear="addClearProvince">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.provinceId"
                filterable
                placeholder="省份"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseProvince', 'example')"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区名称" prop="name">
              <el-input
                v-model.trim="exampleForm.name"
                auto-complete="off"
                maxlength="20"
                @focus="openShowDialog()"
                placeholder="点击查看地图"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="2">
              <el-form-item>
                <el-button type="primary" @click="openShowDialog()" >坐标</el-button>
              </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="城市" prop="cityId" v-show="showCommName">
              <!-- <el-autocomplete clearable v-model="exampleForm.cityName" class="filter-item" placeholder="城市" style="width: 100%;" :fetch-suggestions="addQuerySearchCity" @select="addHandleSelectDistrict" @clear="addClearCity">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.cityId"
                filterable
                placeholder="城市"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCity', 'example')"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经度" prop="lng">
              <el-input
                v-model.trim="exampleForm.lng"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="纬度" prop="lat">
              <el-input
                v-model.trim="exampleForm.lat"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区县" prop="districtId" v-show="showCommName">
              <!-- <el-autocomplete clearable v-model="exampleForm.districtName" class="filter-item" placeholder="区县" style="width: 100%;" :fetch-suggestions="addQuerySearchDistrict" @select="addHandleSelectCommunity" @clear="addClearCommunity">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.districtId"
                filterable
                placeholder="区县"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseDistrict', 'example')"
              >
                <el-option
                  v-for="(item, index) in districts"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区类型" prop="type">
              <el-select
                clearable
                placeholder="可选"
                style="width: 100%;"
                v-model="exampleForm.type"
              >
                <el-option
                  v-for="(val, key) in Dicts.COMMUNITY_TYPE"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="镇" prop="townId" v-show="showCommName">
              <!-- <el-autocomplete clearable v-model="exampleForm.townName" class="filter-item" placeholder="镇" style="width: 100%;" :fetch-suggestions="addQuerySearchTown" @select="addHandleSelectVillage" @clear="addClearVillage">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.townId"
                filterable
                placeholder="镇"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseTown', 'example')"
              >
                <el-option
                  v-for="(item, index) in towns"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区状态" prop="status">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="exampleForm.status"
              >
                <el-option
                  v-for="(val, key) in Dicts.CONSUMER_STATUS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="街道" prop="villageId" v-show="showCommName">
              <!-- <el-autocomplete clearable v-model="exampleForm.villageName" class="filter-item" placeholder="街道" style="width: 100%;" :fetch-suggestions="addQuerySearchVillage" @select="addHandleSelect" @clear="addClear">
              </el-autocomplete> -->
              <el-select
                v-model="exampleForm.villageId"
                filterable
                placeholder="街道"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseVillage', 'example')"
              >
                <el-option
                  v-for="village in villages"
                  :key="village.rowId"
                  :value="village.rowId"
                  :label="village.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传图片:">
              <el-upload
                v-model="exampleForm.photo"
                class="upload-demo"
                action=""
                :data="{ dir: '/communitys/' + this.imgDate }"
                :file-list="files"
                :http-request="upload"
                :on-success="uploadCommunity"
                list-type="picture"
                accept="image/*"
                :limit="1"
              >
                <el-button size="small" type="primary">选择图片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveExampleForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`${'编辑'}小区`"
      :visible.sync="editFormVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="editForm"
        label-width="110px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="provinceId">
              <el-select
                clearable
                v-model="editForm.provinceId"
                filterable
                placeholder="省份"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseProvince', 'editForm')"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区名称" prop="name">
              <el-input
                v-model.trim="editForm.name"
                auto-complete="off"
                maxlength="20"
                @focus="zuobiao()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="城市" prop="cityId">
              <el-select
                clearable
                v-model="editForm.cityId"
                filterable
                placeholder="城市"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCity', 'editForm')"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经度" prop="lng">
              <el-input
                v-model="editForm.lng"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="纬度" prop="lat">
              <el-input
                v-model="editForm.lat"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区县" prop="districtId">
              <el-select
                clearable
                v-model="editForm.districtId"
                filterable
                placeholder="区县"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseDistrict', 'editForm')"
              >
                <el-option
                  v-for="(item, index) in districts"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区类型" prop="type">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="editForm.type"
              >
                <el-option
                  v-for="(val, key) in Dicts.COMMUNITY_TYPE"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="镇" prop="townId">
              <el-select
                clearable
                v-model="editForm.townId"
                filterable
                placeholder="镇"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseTown', 'editForm')"
              >
                <el-option
                  v-for="(item, index) in towns"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区状态" prop="status">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="editForm.status"
              >
                <el-option
                  v-for="(val, key) in Dicts.CONSUMER_STATUS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="街道" prop="villageId">
              <el-select
                clearable
                v-model="editForm.villageId"
                filterable
                placeholder="街道"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseVillage', 'editForm')"
              >
                <el-option
                  v-for="village in villages"
                  :key="village.rowId"
                  :value="village.rowId"
                  :label="village.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传图片:">
              <el-upload
                v-model="editForm.photo"
                class="upload-demo"
                action=""
                :data="{ dir: '/communitys/' + this.imgDate }"
                :file-list="files"
                :http-request="upload"
                :on-success="uploadCommunity"
                list-type="picture"
                accept="image/*"
                :limit="1"
              >
                <el-button size="small" type="primary">选择图片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="'编辑地图'"
      :visible.sync="editShowMapVisible"
      width="70%"
    >
      <div>
        <el-input
          v-model="editForm.name"
          style="width: 300px;"
          placeholder="请输入详细小区名称"
        ></el-input>
        <el-button @click="selectCom" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </div>
      <br />
      <div style="width: 100%; height: 550px" id="editMap"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editShowMapVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="'查看小区地图'"
      :visible.sync="queryShowMapVisible"
      width="70%"
    >
      <div>
        <el-input v-model="editForm.name" style="width: 300px;"></el-input>
      </div>
      <br />
      <div style="width: 100%; height: 550px" id="editMap"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="queryShowMapVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="'选取坐标'"
      :visible.sync="dialogShowFormVisible"
      width="70%"
    >
      <div>
        <el-input
          v-model="exampleForm.name"
          style="width: 300px;"
          placeholder="请输入详细小区名称"
        ></el-input>
        <el-button @click="queryCom" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </div>
      <br />
      <div style="width: 100%; height: 550px" id="myMap"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShowFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="'查看小区详情'"
      :visible.sync="dialogShowMapVisible"
      width="35%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="editForm"
        label-width="110px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="省份" prop="provinceId">
              {{ editForm.provinceName }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="小区名称">
              <el-input
                v-model.trim="editForm.name"
                auto-complete="off"
                maxlength="20"
                @focus="zuobiao()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="城市" prop="cityId">
              {{ editForm.cityName }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="经度" prop="lng">
              {{ editForm.lng }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="区县" prop="districtId">
              {{ editForm.districtName }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="纬度" prop="lat">
              {{ editForm.lat }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="镇" prop="townId">
              {{ editForm.townName }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="小区类型">
              {{ Dicts.COMMUNITY_TYPE[editForm.type] }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="街道" prop="villageId">
              {{ editForm.villageName }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="小区状态">
              {{ Dicts.CONSUMER_STATUS[editForm.status] }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogShowMapVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- <el-dialog :title="'查看地图'" :visible.sync="dialogShowMapVisible" width="70%">
      <div style="width: 100%; height: 550px" id="checkMap"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShowMapVisible = false">关闭</el-button>
      </div> -->
    <!-- </el-dialog> -->
    <el-dialog
      :title="`${addBuildingForm.communityId ? '新增' : '新增'}楼栋`"
      :visible.sync="addBuildingVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addBuildingForm"
        label-width="90px"
        :rules="addBuildingRules"
        ref="addBuildingForm"
      >
        <el-form-item>
          <el-radio-group @change="chooseAddNum" v-model="radioNum">
            <el-radio label="1">单个添加</el-radio>
            <el-radio label="2">批量添加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="小区名称:">
          <el-input
            v-model="addBuildingForm.communityName"
            :disabled="true"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="楼栋名称:" v-if="single" prop="name">
          <el-input
            v-model.trim="addBuildingForm.name"
            placeholder="楼栋名称"
            auto-complete="off"
            maxlength="20"
            @blur="keys"
          ></el-input>
        </el-form-item>
        <el-form-item label="起始数:" prop="startCount" v-if="double">
          <el-input-number
            v-model="addBuildingForm.startCount"
            :min="1"
            :max="99999"
            :precision="0"
            style="width: 100%;"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="结束数:" prop="count" v-if="double">
          <el-input-number
            v-model="addBuildingForm.count"
            :min="1"
            :max="99999"
            :precision="0"
            style="width: 100%;"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="楼栋状态" prop="status">
          <el-select
            placeholder="可选"
            style="width: 100%;"
            v-model="addBuildingForm.status"
          >
            <el-option
              v-for="(val, key) in Dicts.CONSUMER_STATUS"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addBuildingVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBulidIng">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`${communityForm.communityId ? '查看' : '查看'}通卡列表`"
      :visible.sync="doorCardFormVisible"
      width="50%"
    >
      <el-table v-loading="loading" :data="doorCardList" style="width: 100%">
        <el-table-column prop="rowId" label="卡编号" width="80">
        </el-table-column>
        <el-table-column prop="cardNo" label="卡号" width="200">
        </el-table-column>
        <el-table-column prop="expdate" label="有效期" width="200">
        </el-table-column>
        <el-table-column prop="status" label="卡状态" width="150">
          <template slot-scope="scope">
            {{ Dicts.DOORCARD_STATUS[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding "
          fixed="right"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              v-permission="'community:deleteCard'"
              @click="doorCardDelete(scope.row.rowId)"
              icon="el-icon-close"
              circle
              title="删除"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="filter-container">
        <el-button
          v-permission="'community:bindGeneralCard'"
          class="filter-item"
          style="margin-top: 35px;margin-left: 85%;"
          @click="openDoorCardDialog(communityForm.communityId)"
          type="success"
          >绑定通卡</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :title="`${communityForm.communityId ? '绑定' : '绑定'}通卡`"
      :visible.sync="doorCardDialogFormVisible"
      width="25%"
    >
      <el-form
        :model="communityForm"
        label-width="120px"
        :rules="editFormRules"
        ref="communityForm"
      >
        <el-row>
          <el-col>
            <el-form-item label="卡号获取方式:" prop="cardAccess">
              <el-select
                placeholder="请选择卡号获取方式"
                style="width: 100%;"
                v-model="communityForm.cardAccess"
                @change="chooseCardAccess"
              >
                <el-option
                  v-for="(val, key) in Dicts.CARD_ACCESS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="cardBatch">
          <el-col :span="18">
            <el-form-item label="卡批次:">
              <el-input
                v-model="communityForm.batchNo"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button @click="getCardNo" type="success">获取</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="卡号:" prop="cardNo">
              <el-input
                v-model="communityForm.cardNo"
                auto-complete="off"
                :disabled="showCardNo"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="doorCardDialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveCommunityDoor(communityForm.communityId)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryCommunity,
  deleteCommunity,
  saveCommunity,
  queryCommunityDetail,
  saveBulidIng,
  selectAllCommunity,
  queryDoorCardByBatchNo
} from '@/api/community'
import {
  queryProvince,
  getCity,
  getDistrict,
  getTown,
  getVillage
} from '@/api/area'
import {
  getAlreadGeneralCard,
  bindAllGeneralCard,
  deleteGeneralCard
} from '@/api/card'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
import BMap from 'BMap'
Vue.use(Viewer)

export default {
  name: 'community',
  data() {
    var checkStartNum = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入起始数量'))
      } else {
        if (this.addBuildingForm.count !== '') {
          this.$refs.addBuildingForm.validateField('count')
        }
        callback()
      }
    }
    var checkNum = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入结束数量'))
      } else {
        if (value < this.addBuildingForm.startCount) {
          callback(new Error('起始数要小于结束数'))
        } else {
          callback()
        }
      }
    }
    return {
      imgDate: '',
      files: [],
      radioNum: '1',
      doorCardList: [],
      cardBatch: false,
      showCardNo: false,
      doorCardFormVisible: false,
      doorCardDialogFormVisible: false,
      dialogShowFormVisible: false,
      dialogShowMapVisible: false,
      editShowMapVisible: false,
      queryShowMapVisible: false,
      dialogFormVisible: false,
      addBuildingVisible: false,
      communityFormVisible: false,
      showCommName: true,
      editFormVisible: false,
      communityForm: [],
      editForm: [],
      editFormRules: {
        name: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
        type: [
          { required: true, message: '请选择小区类型', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择小区状态', trigger: 'change' }
        ]
      },
      communityFormRules: {
        // communityId: [
        //   { required: true, message: '请选择小区', trigger: 'change' }
        // ]
      },
      loading: false,
      single: true,
      double: false,
      exampleForm: {
        rowId: '',
        provinceId: '',
        provinceName: '',
        cityId: '',
        districtId: '',
        townId: '',
        villageId: '',
        viallageName: '',
        name: '',
        code: '',
        type: '',
        status: '',
        tel: ''
      },
      addBuildingForm: [
        {
          rowId: undefined
        }
      ],
      provinces: [],
      citys: [],
      districts: [],
      towns: [],
      villages: [],
      regins: [],
      communitys: [],
      exampleFormRules: {
        name: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
        type: [
          { required: true, message: '请选择小区类型', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择小区状态', trigger: 'change' }
        ],
        tel: [{ required: true, message: '请输入电话区号', trigger: 'blur' }]
      },
      addBuildingRules: {
        name: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
        startCount: [
          { required: true, validator: checkStartNum, trigger: 'blur' }
        ],
        count: [{ required: true, validator: checkNum, trigger: 'blur' }],
        status: [
          { required: true, message: '请选择楼栋状态', trigger: 'change' }
        ]
      },
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined,
        cnName: undefined
      },
      records: [],
      map: undefined,
      userlocation: {
        lng: '',
        lat: ''
      },
      local: ''
    }
  },
  created() {
    // 初始化一次oss client,如果初始化过一次返回上一次初始化对象
    this.initOssClient().then(_ => {
      this.doQuery()
    })
  },
  methods: {
    queryDoorById(rowId) {
      this.loading = true
      this.doorCardList = ''
      getAlreadGeneralCard(rowId).then(({ data: { code, data, msg } }) => {
        this.doorCardFormVisible = true
        this.doorCardList = data
        this.communityForm.communityId = rowId
        this.loading = false
      })
    },
    openDoorCardDialog(communityId) {
      this.communityForm = {}
      this.cardBatch = false
      this.showCardNo = false
      this.communityForm.communityId = communityId
      this.doorCardDialogFormVisible = true
      this.$refs.communityForm && this.$refs.communityForm.resetFields()
    },
    chooseCardAccess(val) {
      if (val === '0') {
        this.cardBatch = true
        this.showCardNo = true
      } else {
        this.cardBatch = false
        this.showCardNo = false
      }
    },
    getCardNo() {
      this.communityForm.type = '2'
      queryDoorCardByBatchNo(
        this.communityForm.batchNo,
        this.communityForm.communityId,
        this.communityForm.type
      ).then(({ data: { code, data, msg } }) => {
        this.communityForm = {
          cardNo: data.cardNo,
          batchNo: this.communityForm.batchNo,
          cardBatchId: data.cardBatchId,
          rowId: data.rowId,
          communityId: this.communityForm.communityId,
          cardAccess: this.communityForm.cardAccess
        }
      })
    },
    saveCommunityDoor(rowId) {
      this.$refs.communityForm.validate(valid => {
        if (valid) {
          this.communityForm.communityId = rowId
          bindAllGeneralCard(this.communityForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.queryDoorById(this.communityForm.communityId)
                this.doorCardDialogFormVisible = false
              }
              this.$message({
                showClose: true,
                message: '绑定门卡成功',
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    doorCardDelete(rowId) {
      this.communityForm.doorCardId = rowId
      this.$confirm('此操作将删除该通卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGeneralCard(this.communityForm).then(
          ({ data: { data, msg } }) => {
            this.queryDoorById(this.communityForm.communityId)
            this.$message({
              showClose: true,
              message: '删除通卡成功',
              type: 'success'
            })
          }
        )
      })
    },
    chooseAddNum(val) {
      if (val === '2') {
        this.single = false
        this.double = true
      }
      if (val === '1') {
        this.single = true
        this.double = false
      }
    },
    keys(value) {
      // console.log(value)
    },
    upload(options) {
      this.uploadForElement(options)
    },
    uploadCommunity(response, file, fileList) {
      this.exampleForm.photo = response.name
    },
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doSearchQuery() {
      this.queryForm.current = 1
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryCommunity(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data
        this.loading = false
      })
      this.imgDate =
        new Date().getFullYear() +
        '' +
        (new Date().getMonth() + 1) +
        '' +
        new Date().getDate()
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该小区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCommunity(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    editExample({ rowId }) {
      this.files = []
      this.editForm = {}
      this.$refs.editForm && this.$refs.editForm.resetFields()
      queryCommunityDetail(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.editFormVisible = true
          this.editForm = data
          // this.editForm = {
          //   rowId: data.rowId,
          //   provinceId: data.provinceId,
          //   provinceName: data.provinceName,
          //   provinceCode: data.provinceCode,
          //   cityId: data.cityId,
          //   cityName: data.cityName,
          //   cityCode: data.cityCode,
          //   districtId: data.districtId,
          //   districtName: data.districtName,
          //   districtCode: data.districtCode,
          //   name: data.name,
          //   code: data.code,
          //   type: data.type,
          //   photo: data.photo,
          //   status: data.status,
          //   lng: data.lng,
          //   lat: data.lat
          // }
        }
        queryProvince().then(({ data: { data } }) => {
          this.provinces = data
          this.loading = false
        })
        getCity(this.editForm.provinceId).then(({ data: { data } }) => {
          this.citys = data
          this.loading = false
        })
        getDistrict(this.editForm.cityId).then(({ data: { data } }) => {
          this.districts = data
          this.loading = false
        })
        getTown(this.editForm.districtId).then(({ data: { data } }) => {
          this.towns = data
          this.loading = false
        })
        if (this.editForm.townId !== undefined) {
          getVillage(this.editForm.townId).then(({ data: { data } }) => {
            this.villages = data
            this.loading = false
          })
        }
      })
    },
    mapReady() {
      this.exampleForm.lng = ''
      this.exampleForm.lat = ''
      // 创建地图实例
      this.map = new BMap.Map('myMap')
      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(118.828724, 31.950507), 20)
      // 添加标注
      this.map.addOverlay(
        new BMap.Marker(new BMap.Point(118.828724, 31.950507))
      )
      // 开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)
      // this.opts = {
      //   width: 200,
      //   height: 100,
      //   title: '南京智杰物联可以股份有限公司'
      // }
      // this.infoWindow = new BMap.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', this.opts)
      // new BMap.Marker(new BMap.Point(118.828724, 31.950507)).addEventListener('click', function() {
      //   this.map.openInfoWindow(this.infoWindow, new BMap.Point(118.828724, 31.950507))
      // })
      this.map.addEventListener('click', function(e) {
        this.userlocation = {
          lng: parseFloat(e.point.lng),
          lat: parseFloat(e.point.lat)
        }
        // this.exampleForm.lng = this.userlocation.lng
        // this.exampleForm.lat = this.userlocation.lat
      })
    },
    queryCom() {
      const _this = this
      const myValue = this.exampleForm.name
      // 清除地图上所有覆盖物
      this.map.clearOverlays()
      // 智能搜索
      this.local = new BMap.LocalSearch(_this.map, {
        onSearchComplete: _this.onSearchComplete
      })
      this.local.search(myValue)
      this.exampleForm.name = myValue
    },
    onSearchComplete() {
      // 获取第一个智能搜索的结果
      const pp = this.local.getResults().getPoi(0).point
      this.userlocation.lng = parseFloat(pp.lng)
      this.userlocation.lat = parseFloat(pp.lat)
      this.map.centerAndZoom(pp, 18)
      // 添加标注
      this.map.addOverlay(new BMap.Marker(pp))
      this.exampleForm.lng = parseFloat(this.userlocation.lng)
      this.exampleForm.lat = parseFloat(this.userlocation.lat)
      this.editForm.lng = parseFloat(this.userlocation.lng)
      this.editForm.lat = parseFloat(this.userlocation.lat)
    },
    queryMap({ rowId, townName, villageName }) {
      this.files = []
      this.editForm = {}
      this.$refs.editForm && this.$refs.editForm.resetFields()
      queryCommunityDetail(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.dialogShowMapVisible = true
          this.editForm = data
          this.editForm.townName = townName
          this.editForm.villageName = villageName
        }
      })
    },
    queryDetailMap() {
      if (
        this.userlocation.lng === undefined ||
        this.userlocation.lat === undefined
      ) {
        // 创建地图实例
        this.map = new BMap.Map('checkMap')
        // 初始化地图，设置中心点坐标和地图级别
        this.map.centerAndZoom(new BMap.Point(118.828724, 31.950507), 20)
        // 添加标注
        this.map.addOverlay(
          new BMap.Marker(new BMap.Point(118.828724, 31.950507))
        )
        // 开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)
      } else {
        // 创建地图实例
        this.map = new BMap.Map('checkMap')
        // 初始化地图，设置中心点坐标和地图级别
        this.map.centerAndZoom(
          new BMap.Point(this.userlocation.lng, this.userlocation.lat),
          20
        )
        // 添加标注
        this.map.addOverlay(
          new BMap.Marker(
            new BMap.Point(this.userlocation.lng, this.userlocation.lat)
          )
        )
        // 开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)
      }
    },
    openCreateDialog() {
      this.showCommName = true
      this.exampleForm = {}
      this.provinces = []
      this.files = []
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data
        this.loading = false
      })
      this.citys = []
      this.districts = []
      this.towns = []
      this.villages = []
      this.dialogFormVisible = true
      this.$refs.exampleForm && this.$refs.exampleForm.resetFields()
    },
    openShowDialog() {
      this.dialogShowFormVisible = true
      this.$nextTick(this.mapReady)
    },
    zuobiao() {
      this.editShowMapVisible = true
      this.$nextTick(this.queryZuoBiao)
    },
    zuobiao2() {
      this.queryShowMapVisible = true
      this.$nextTick(this.queryZuoBiao)
    },
    queryZuoBiao() {
      if (this.editForm.lng === undefined || this.editForm.lat === undefined) {
        // 创建地图实例
        this.map = new BMap.Map('editMap')
        // 初始化地图，设置中心点坐标和地图级别
        this.map.centerAndZoom(new BMap.Point(118.828724, 31.950507), 20)
        // 添加标注
        this.map.addOverlay(
          new BMap.Marker(new BMap.Point(118.828724, 31.950507))
        )
        // 开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)
      } else {
        // 创建地图实例
        this.map = new BMap.Map('editMap')
        // 初始化地图，设置中心点坐标和地图级别
        this.map.centerAndZoom(
          new BMap.Point(this.editForm.lng, this.editForm.lat),
          20
        )
        // 添加标注
        this.map.addOverlay(
          new BMap.Marker(new BMap.Point(this.editForm.lng, this.editForm.lat))
        )
        // 开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)
      }
    },
    selectCom() {
      const _this = this
      const myValue = this.editForm.name
      // 清除地图上所有覆盖物
      this.map.clearOverlays()
      // 智能搜索
      this.local = new BMap.LocalSearch(_this.map, {
        onSearchComplete: _this.onSearchComplete
      })
      this.local.search(myValue)
      this.editForm.name = myValue
    },
    openAddBuilding({ rowId }) {
      this.addBuildingVisible = true
      this.addBuildingForm = {}
      this.$refs.addBuildingForm && this.$refs.addBuildingForm.resetFields()
      queryCommunityDetail(rowId).then(({ data: { code, data, msg } }) => {
        this.addBuildingForm = {
          communityId: data.rowId,
          communityName: data.name
        }
      })
    },
    saveBulidIng() {
      this.$refs.addBuildingForm.validate(valid => {
        if (valid) {
          this.addBuildingVisible = false
          saveBulidIng(this.addBuildingForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    cascade(rowId, level, param) {
      if (param === 'query') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.queryForm.cityId = ''
                this.queryForm.districtId = ''
                this.queryForm.rowId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.queryForm.districtId = ''
                this.queryForm.rowId = ''
                this.districts = []
                this.communitys = []
                this.districts = data
              })
              return
            case 'chooseRegin':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.queryForm.rowId = ''
                this.communitys = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectAllCommunity(this.queryForm.districtId).then(
                ({ data: { data } }) => {
                  this.communitys = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.queryForm.cityId = ''
              this.queryForm.districtId = ''
              this.queryForm.rowId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              return
            case 'chooseCity':
              this.queryForm.districtId = ''
              this.queryForm.rowId = ''
              this.districts = []
              this.communitys = []
              return
            case 'chooseRegin':
              this.queryForm.rowId = ''
              this.communitys = []
              return
            case 'chooseCommunity':
              this.queryForm.rowId = ''
              return
          }
        }
      } else if (param === 'example') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.exampleForm.cityId = ''
                this.exampleForm.districtId = ''
                this.exampleForm.townId = ''
                this.exampleForm.villageId = ''
                this.citys = []
                this.districts = []
                this.towns = []
                this.villages = []
                const datas = this.provinces.find(item => item.rowId === rowId)
                this.exampleForm.provinceName = datas.cnName
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.exampleForm.districtId = ''
                this.exampleForm.townId = ''
                this.exampleForm.villageId = ''
                this.districts = []
                this.towns = []
                this.villages = []
                const datas = this.citys.find(item => item.rowId === rowId)
                this.exampleForm.cityName = datas.cnName
                this.districts = data
              })
              return
            case 'chooseDistrict':
              getTown(rowId).then(({ data: { data } }) => {
                this.exampleForm.townId = ''
                this.exampleForm.villageId = ''
                this.towns = []
                this.villages = []
                const datas = this.districts.find(item => item.rowId === rowId)
                this.exampleForm.districtName = datas.cnName
                this.towns = data
              })
              return
            case 'chooseTown':
              getVillage(rowId).then(({ data: { data } }) => {
                this.exampleForm.villageId = ''
                this.villages = data
              })
              return
            case 'chooseVillage':
              getVillage(this.exampleForm.townId).then(({ data: { data } }) => {
                this.villages = data
              })
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.exampleForm.cityId = ''
              this.exampleForm.districtId = ''
              this.exampleForm.rowId = ''
              this.exampleForm.townId = ''
              this.exampleForm.villageId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.towns = []
              this.villages = []
              return
            case 'chooseCity':
              this.exampleForm.districtId = ''
              this.exampleForm.rowId = ''
              this.exampleForm.townId = ''
              this.exampleForm.villageId = ''
              this.districts = []
              this.communitys = []
              this.towns = []
              this.villages = []
              return
            case 'chooseDistrict':
              this.exampleForm.rowId = ''
              this.communitys = []
              this.exampleForm.townId = ''
              this.exampleForm.villageId = ''
              this.towns = []
              this.villages = []
              return
            case 'chooseTown':
              this.exampleForm.villageId = ''
              this.villages = []
              return
          }
        }
      } else if (param === 'editForm') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.editForm.cityId = ''
                this.editForm.districtId = ''
                this.editForm.townId = ''
                this.editForm.villageId = ''
                this.citys = []
                this.districts = []
                this.towns = []
                this.villages = []
                const datas = this.provinces.find(item => item.rowId === rowId)
                this.editForm.provinceName = datas.cnName
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.editForm.districtId = ''
                this.editForm.townId = ''
                this.editForm.villageId = ''
                this.districts = []
                this.towns = []
                this.villages = []
                const datas = this.citys.find(item => item.rowId === rowId)
                this.editForm.cityName = datas.cnName
                this.districts = data
              })
              return
            case 'chooseDistrict':
              getTown(rowId).then(({ data: { data } }) => {
                this.editForm.townId = ''
                this.editForm.villageId = ''
                this.towns = []
                this.villages = []
                const datas = this.districts.find(item => item.rowId === rowId)
                this.editForm.districtName = datas.cnName
                this.towns = data
              })
              return
            case 'chooseTown':
              getVillage(rowId).then(({ data: { data } }) => {
                this.editForm.villageId = ''
                this.villages = data
              })
              return
            case 'chooseVillage':
              getVillage(this.editForm.townId).then(({ data: { data } }) => {
                this.villages = data
              })
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.editForm.cityId = ''
              this.editForm.districtId = ''
              this.editForm.rowId = ''
              this.editForm.townId = ''
              this.editForm.villageId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.towns = []
              this.villages = []
              return
            case 'chooseCity':
              this.editForm.districtId = ''
              this.editForm.rowId = ''
              this.editForm.townId = ''
              this.editForm.villageId = ''
              this.districts = []
              this.communitys = []
              this.towns = []
              this.villages = []
              return
            case 'chooseDistrict':
              this.editForm.rowId = ''
              this.communitys = []
              this.editForm.townId = ''
              this.editForm.villageId = ''
              this.towns = []
              this.villages = []
              return
            case 'chooseTown':
              this.editForm.villageId = ''
              this.villages = []
              return
          }
        }
      }
    },
    saveExampleForm() {
      this.$refs.exampleForm.validate(valid => {
        if (valid) {
          if (
            this.exampleForm.districtId === '' ||
            this.exampleForm.districtId === undefined
          ) {
            this.$message({
              showClose: true,
              message: '请选择区县',
              type: 'warning'
            })
          } else {
            saveCommunity(this.exampleForm).then(
              ({ data: { data, msg, code } }) => {
                if (code === 0) {
                  this.doQuery()
                  this.dialogFormVisible = false
                }
                this.$message({
                  showClose: true,
                  message: msg,
                  type: code === 0 ? 'success' : 'error'
                })
              }
            )
          }
        } else {
          return false
        }
      })
    },
    updateForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          saveCommunity(this.editForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
              this.editFormVisible = false
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    }
  },
  components: {}
}
</script>

<style scoped></style>
